<!-- 销售开单统计 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="layout">
      <u-scroll-list :indicator="false" class="p-b-0">
        <view class="top-view p-t-20">
          <view class="flex flex-sa f-35 m-b-10">
            <view class="f-35">
              <view class="flex flex-c f-32 text-color"> 总匹数 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ footerTotal.piecesCount || 0 }}
              </view>
            </view>
            <view class="f-35">
              <view class="flex flex-c f-32 text-color"> 总数量 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ footerTotal.quantity || 0 }}
              </view>
            </view>
            <view class="f-35">
              <view class="flex flex-c f-32 text-color"> 总金额 </view>
              <view class="flex flex-c f-30 m-b-10">
                {{ footerTotal.totalPrice || 0 }}
              </view>
            </view>
          </view>
        </view>
      </u-scroll-list>
      <u-sticky offset-top="0">
        <c-time @hasPage="getHasPage" @success="timeSuccess">
          <view class="flex s-content" slot="content">
            <view
              class="check-account flex flex-dlii select-item"
              @click="
                goRoute(
                  billId.data.name,
                  1,
                  'pages/application/pages/cloth/sales-statistics/product-index'
                )
              "
              :class="{ marginLeft: !haspage }"
            >
              <text class="grey p-r-10">{{
                billId.data.name || "选产品"
              }}</text>
              <u-icon
                v-if="!billId.data.name"
                name="arrow-down-fill"
                color="#ccc"
                size="10"
              ></u-icon>
              <text class="c-99" v-else>x</text>
            </view>
            <view
              class="check-account flex flex-dlii select-item"
              @click="
                goRoute(
                  billId.data.keywords,
                  2,
                  'pages/application/pages/cloth/sales-ticket/index?page=return&type=return'
                )
              "
            >
              <text class="grey p-r-10">{{
                billId.data.keywords || "选客户"
              }}</text>
              <u-icon
                v-if="!billId.data.keywords"
                name="arrow-down-fill"
                color="#ccc"
                size="10"
              ></u-icon>
              <text class="c-99" v-else>x</text>
            </view>
          </view>
        </c-time>
      </u-sticky>
      <view
        class="list-view"
        @click="detail(item)"
        v-for="(item, index) in indexList"
        :key="index"
      >
        <view class="dl-view">
          <view class="dt-view flex">
            <view class="name">
              {{ item.comegoName }}
            </view>
            <view class="user flex">
              <text class="grey m-r-10">{{ item.businessTime }}</text>
              <text class="grey m-r-10">管理员</text>
              <text class="blue m-r-10" v-if="item.isCancel">已作废</text>
              <text
                class="red m-r-10"
                v-if="item.auditState == false && item.isCancel == false"
                >未审核</text
              >
              <text
                class="green m-r-10"
                v-if="item.auditState == true && item.isCancel == false"
                >已审核</text
              >
            </view>
          </view>
          <view class="dd-view flex">
            <view class="all-view">
              <text class="grey m-r-10">共</text
              ><text>{{ item.piecesCount || 0 }}匹</text
              ><text>{{ item.quantity }}米</text>
            </view>
            <view class="pay-view">
              <text class="grey m-r-10">应收</text>
              <text class="red">￥{{ item.totalPrice || 0}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed-btn border-top">
        <view class="btn-con flex">
          <u-button
            type="primary"
            @click="
              goRouteDocument(
                '/pages/application/pages/cloth/sales-ticket/index?type=thjs&page=thjs'
              )
            "
            shape="circle"
            text="新增退货单"
            color="#999"
            class="m-r-20"
          ></u-button>
          <u-button
            type="primary"
            @click="
              goRouteDocument(
                '/pages/application/pages/cloth/sales-ticket/index?type=xsd&page=xsd'
              )
            "
            shape="circle"
            text="新增销售单"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
          ></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import cTime from "@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue";
import { getlist, getSaleReturnlist } from "@/apis/bill/purchase";
export default {
  name: "",
  components: {
    cTime,
  },
  data() {
    return {
      config: {
        title: "销售开单统计",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      haspage: true,
      pages: {
        current: 1,
        size: 20,
      },
      billId: {
        data: {
          isCancel: false,
          beginTime: null, // 开始事件
          endTime: null, // 结束时间
          keywords: "", // 客户
          spuId: "", //产品spuId
          code: "", //产品code
          name: "", //name
        },
        page: {
          current: 1,
          size: 20,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "business_time",
              asc: false,
            },
          ],
        },
      },
      footerTotal: {
        priceQuantity: 0,
        piecesCount: 0,
        quantity: 0,
        totalPrice: 0,
      },
      indexList: [],
      productPage: null,
    };
  },
  onLoad(info) {
    this.productPage = info.page;
    this.initData();
  },
  onShow() {
    // 产品
    uni.$on("salesStatisticsProduct", (data) => {
      this.billId.data.name = data.name;
      this.billId.data.code = data.code;
      this.billId.data.spuId = data.spuId;
      this.pages.current = 1;
      this.indexList = [];
      this.initData();
      uni.$off("salesStatisticsProduct");
    });
    // 客户
    uni.$on("on-sales-ticket", (data) => {
      this.billId.data.keywords = data.name;
      this.pages.current = 1;
      this.indexList = [];
      this.initData();
      uni.$off("on-sales-ticket");
    });
  },
  beforeDestroy() {
    uni.$off("salesStatisticsProduct");
    uni.$off("on-sales-ticket");
  },
  methods: {
    // 查看详情
    detail(item) {
      this.$ls.remove("xsdInformation");
      this.$ls.remove("cgdInformation");
      this.$ls.remove("thjsInformation");
      if (this.productPage == "xsd") {
        uni.redirectTo({
          url: `/pages/application/pages/cloth/procure/settlement/sales?id=${item.id}&type=details`,
        });
      } else if (this.productPage == "thjs") {
        uni.redirectTo({
          url: `/pages/application/pages/cloth/procure/settlement/return?id=${item.id}&type=details`,
        });
      }
    },
    // 跳转到销售单和退货单
    goRouteDocument(item) {
      if (!item) {
        this.$refs.uToast.show({
          type: "default",
          message: "正在开发中",
        });
        return;
      }
      // 先清除在产页面等
      this.$ls.remove("xsdInformation");
      this.$ls.remove("cgdInformation");
      this.$Router.push({
        path: item,
      });
    },
    // 路由跳转
    goRoute(item, index, url) {
      if (item) {
        if (index == 1) {
          this.billId.data.name = "";
          this.billId.data.code = "";
          this.billId.data.spuId = "";
        } else if (index == 2) {
          this.billId.data.keywords = "";
        }
        this.indexList = [];
        this.initData();
      } else {
        uni.navigateTo({
          url: url,
        });
      }
    },
    // 获取时间参数
    timeSuccess(val, item) {
      console.log("timeSuccess", val, item);
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      if (this.productPage == "xsd") {
        getlist(this.billId).then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.footerTotal = data.footerTotal || {
            priceQuantity: 0,
            piecesCount: 0,
            quantity: 0,
            totalPrice: 0,
          };
          if (this.pages.current == 1) {
            this.indexList = data.page.records;
          } else {
            this.indexList = [...data.page.records, ...this.indexList];
          }
        });
      } else if (this.productPage == "thjs") {
        getSaleReturnlist(this.billId).then((res) => {
          if (!res.flag) return;
          const data = res.data || {};
          this.footerTotal = data.footerTotal || {
            priceQuantity: 0,
            piecesCount: 0,
            quantity: 0,
            totalPrice: 0,
          };
          if (this.pages.current == 1) {
            this.indexList = data.page.records;
          } else {
            this.indexList = [...data.page.records, ...this.indexList];
          }
        });
      }
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true;
      }
    },
    getHasPage(val) {
      this.haspage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-view {
  flex: 1;
  background: linear-gradient(
    to right,
    rgb(64, 158, 255),
    rgb(64, 158, 255),
    rgb(96, 180, 246),
    rgb(96, 180, 246)
  );
  color: #fff;
}

.s-content {
  flex: 1;
  justify-content: space-between;
  // padding-left: 20%;
  padding-right: 10rpx;
}

.border-top {
  border-top: 1rpx solid #ddd;
}

.list-view {
  padding: 10rpx 20rpx;

  .dl-view {
    background-color: #fff;
    box-shadow: 4rpx 4rpx 10rpx #ddd;
    border-radius: 10rpx;
    padding: 30rpx 20rpx;

    .dt-view {
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .name {
        font-size: 30rpx;
        font-weight: 700;
      }

      .user {
        font-size: 24rpx;
        align-items: center;
      }

      .status {
        background-color: #eee;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    .dd-view {
      justify-content: space-between;
      font-size: 24rpx;
    }
  }
}

.marginLeft {
  margin-left: 20%;
}
</style>